<template>
  <div class="boder">
    <div class="boder_loading">
      <div class="loadding_inf">
        <i class="el-icon-loading"></i>
        <div>正在加载。。。</div>
      </div>
    </div>
    <div class="screenshots_header">
      <el-input v-model="needEmpty.screenShotsTitle" placeholder="请输入内容" maxlength="30"></el-input>
      <div class="dis_title_div hide_class">{{needEmpty.screenShotsTitle}}</div>
    </div>
    <div class="screenshots_left"></div>
    <div class="screenshots_right"></div>
    <div class="screenshots_center_bottom">
      <div class="screenshots_static_info">
        描述:
        <el-input
          class="screenshots_static_input"
          placeholder="请输入内容"
          v-model="needEmpty.screenShotsTextarea"
          maxlength="70"
        ></el-input>
        <div class="dis_text_div hide_class">{{needEmpty.screenShotsTextarea}}</div>
      </div>
      <div class="screenshots_static_time">
        时间：
        <el-date-picker
          v-model="needEmpty.screenShotsTime"
          format="yyyy年MM月dd日"
          type="datetime"
          placeholder="选择日期时间"
        ></el-date-picker>
      </div>
    </div>
    <div class="screenshots_bottom">
      <div class="screenshots_static_btn">
        <div class="screenshots_task_btn">
          任务名称：
          <el-select class="inline-input" v-model="needEmpty.taskValue" placeholder="请选择">
            <el-option v-for="item in allTask" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="screenshots_update_btn">
          <el-button plain size="mini" @click="screenShots">保存</el-button>
          <el-button plain size="mini" @click="closeScreenshots">取消</el-button>
        </div>
      </div>
    </div>
    <div class="hide_box">{{isChange}}</div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
import canvasToImage from "canvas2image";
import { mapState } from "vuex";
export default {
  name: "screenshotsStatic",
  data() {
    return {
      needEmpty: {
        screenShotsTitle: "",
        screenShotsTextarea: "",
        screenShotsTime: "",
        taskValue: "",
        id: ""
      },
      img: null,
      needDis: [],
      allTask: []
    };
  },
  methods: {
    hideModel() {
      let noJudge = [
        ".header.header-box",
        ".right-menu",
        ".container.bottom",
        ".searchBox.searchBox",
        "closePanel"
      ];
      let needJudge = [
        ".task.fadeInLeft",
        ".shuffling_box",
        ".time_line_box",
        ".outDiv.baojing"
      ];
      let noHideId = ["GeovisContainer"];
      let noHideClass = ["boder screenshots", "picTips", "GeovisContainer"];
      let arr = $(".index>div");
      for (let i = 0; i < arr.length; i++) {
        let code = false;
        //不需要隐藏的id
        for (let j = 0; j < noHideId.length; j++) {
          if ($(arr[i]).attr("id") == noHideId[j]) {
            code = true;
            break;
          }
        }
        if (!code) {
          //不需要隐藏的id
          for (let n = 0; n < noHideClass.length; n++) {
            if ($(arr[i]).hasClass(noHideClass[n])) {
              code = true;
              break;
            }
          }
          if (!code) {
            if ($(arr[i]).css("display") != "none") {
              this.needDis.push($(arr[i]).attr("class"));
            }
            $(arr[i]).hide();
          }
        }
      }
      //将默认值置空
      for (let key in this.needEmpty) {
        if (key == "screenShotsTime") {
          this.needEmpty[key] = new Date();
        } else {
          this.needEmpty[key] = "";
        }
      }

      if ($(".screenshots_header input").hasClass("hide_class")) {
        $(".screenshots_header input").removeClass("hide_class");
        $(".screenshots_header .dis_title_div").addClass("hide_class");

        $(".screenshots_static_input input").removeClass("hide_class");
        $(".screenshots_static_info .dis_text_div").addClass("hide_class");
      }

      this.taskNameFun();
    },
    //获取任务名称
    async taskNameFun() {
      const taskList = await this.$get("/wuhao/urgent/all");
      this.allTask = taskList;
    },
    //编辑页面
    async getSingleScreenshotsFun(id) {
      await this.$get("wuhao/tmc/one", {
        id: id
      }).then(resultData => {
        console.log(1212, resultData);
        this.needEmpty.screenShotsTime = resultData.time;
        this.needEmpty.screenShotsTitle = resultData.title;
        this.needEmpty.taskValue = resultData.urgentReqId;
        this.needEmpty.screenShotsTextarea = resultData.remark;
        this.needEmpty.id = resultData.id;
      });
    },
    //存储专题图
    screenShots() {
      //非空判断
      if (!this.needEmpty.screenShotsTitle) {
        this.$message({
          message: "请填写报告标题",
          type: "warning",
          duration: "1000",
          offset: 500
        });
      } else if (!this.needEmpty.screenShotsTime) {
        this.$message({
          type: "warning",
          duration: "1000",
          offset: 500
        });
      } else {
        $(".screenshots_header input").addClass("hide_class");
        $(".screenshots_header .dis_title_div").removeClass("hide_class");

        $(".screenshots_static_input input").addClass("hide_class");
        $(".screenshots_static_info .dis_text_div").removeClass("hide_class");
        this.getOuterImg();
      }
    },
    //获取整个图片
    getOuterImg() {
      let self = this;
      // $(".boder_loading").show();
      $(".boder_loading").hide();
      try {
        let test = document.querySelector(".index"); //将jQuery对象转换为dom对象
        html2canvas(test, {
          onrendered: function(canvas) {},
          letterRendering: true
        })
          .then(function(canvas) {
            // canvas宽度
            let canvasWidth1 = canvas.width;
            // canvas高度
            let canvasHeight1 = canvas.height;
            canvas.id = "myCanvasStatic";
            canvas.className = "myCanvasStatic";
            test.appendChild(canvas);
            console.log(canvasToImage);
            let a = canvasToImage;

            self.img = canvasToImage.convertToImage(
              canvas,
              canvasWidth1,
              canvasHeight1
            );
          })
          .then(function() {
            self.getNeedImg();
          });
      } catch (e) {
        $(".boder_loading").hide();
        console.error("画布绘制问题");
      }
    },
    //在整个图片上截取需要的图片
    getNeedImg() {
      let canvasWidth = $(".screenshots_header").width();
      let canvasHeight =
        $(".screenshots_header").height() +
        $(".screenshots_left").height() +
        $(".screenshots_center_bottom").height();
      let canvasTop = $(".screenshots_header").position().top;
      let canvasLeft = $(".screenshots_header").position().left;
      let retCanvas = document.createElement("canvas");
      let retCtx = retCanvas.getContext("2d");
      retCanvas.width = canvasWidth;
      retCanvas.height = canvasHeight;
      retCanvas.style.background = "#ffffff";
      retCtx.drawImage(
        this.img,
        canvasLeft,
        canvasTop,
        canvasWidth,
        canvasHeight,
        0,
        0,
        canvasWidth,
        canvasHeight
      );
      let img2 = canvasToImage.convertToImage(
        retCanvas,
        canvasWidth,
        canvasHeight
      );
      this.confirm(this.convertBase64UrlToBlob(img2.src));
    },
    //将base64图片转为blob格式
    convertBase64UrlToBlob(dataurl) {
      try {
        let arr = dataurl.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
          type: "image/png"
        });
      } catch (err) {
        $(".boder_loading").hide();
        console.log(err.message);
      }
    },
    //图片发送
    confirm(file) {
      // //blob转换成dataUrl
      // let data = window.URL.createObjectURL(file);
      // console.log("图片地址：" + data)
      let formData = new FormData();
      formData.append("filename", "my-file"); // 文件名
      formData.append("operation", "upload_file");
      formData.append("file", file);

      formData.append("angle1", "0");
      formData.append("angle2", "0");
      formData.append("angle3", "0");
      formData.append("height", "0");
      formData.append("planId", "0");
      formData.append("path", "");
      formData.append("title", this.needEmpty.screenShotsTitle);
      formData.append("urgentReqId", this.needEmpty.taskValue);
      formData.append("remark", this.needEmpty.screenShotsTextarea);
      let time = "";
      if (typeof this.needEmpty.screenShotsTime == "object") {
        let year = this.needEmpty.screenShotsTime.getFullYear();
        let month = this.needEmpty.screenShotsTime.getMonth() + 1;
        let date = this.needEmpty.screenShotsTime.getDate();
        time = year + "-" + month + "-" + date;
      } else {
        time = this.needEmpty.screenShotsTime.split(" ")[0];
      }
      formData.append("time", time);
      if (this.needEmpty.id) {
        formData.append("id", this.needEmpty.id);
        this.sendUpdateFile(formData);
      } else {
        this.sendAddFile(formData);
      }
    },
    //向后台传输数据
    async sendAddFile(formData) {
      const resultData = await this.$post("/wuhao/tmc/new", formData, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      });
      if (resultData == true) {
        this.closeScreenshots();
        $(".boder_loading").hide();
        console.log("成功");
      } else {
        $(".boder_loading").hide();
        console.error("网络原因");
      }
    },
    //向后台传输数据
    async sendUpdateFile(formData) {
      const resultData = await this.$post("wuhao/tmc/upd", formData, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      });
      if (resultData == true) {
        this.closeScreenshots();
        $(".boder_loading").hide();
        console.log("成功");
      } else {
        $(".boder_loading").hide();
        console.error("网络原因");
      }
    },
    //关闭功能
    closeScreenshots() {
      let screenshots = this.$store.getters.screenshots;
      screenshots.isShowScreenshots = false;
      $(".myCanvasStatic").hide();
      this.closeCallBack();
    },
    // 关闭回调
    closeCallBack() {
      let arr = this.needDis;
      if (arr.length > 0) {
        arr.forEach((item, index) => {
          if (item != undefined) {
            let classArr = item.split(" ");
            let strClass = "";
            classArr.forEach((item2, index) => {
              strClass = "." + item2 + strClass;
            });
            $(strClass).show();
          }
        });
        this.needDis = [];
      }
    },
    //标题的键盘键入
    keydownFun(ele) {
      let maxNum = $(ele.currentTarget).attr("maxNum") * 1;
      if ($(ele.currentTarget).text().length > maxNum) {
        $(ele.currentTarget).text(
          this.needEmpty[$(ele.currentTarget).attr("code")]
        );
        this.needEmpty[$(ele.currentTarget).attr("code")] = $(ele.currentTarget)
          .text()
          .substring(0, maxNum);
        $(ele.currentTarget)
          .focus()
          .text();

        let textbox = $(ele.currentTarget)[0];
        let sel = window.getSelection();
        let range = document.createRange();
        range.selectNodeContents(textbox);
        range.collapse(false);
        sel.removeAllRanges();cavcacacacacaca
        sel.addRange(range);cavcacacacacaca
      } else {cavcacacacacaca
        this.needEmpty[$(ele.currentTarget).attr("ccavcacacacacacaode")] = $(
          ele.currentTarget
        ).text();
      }
    }
  },
  computed: {
    ...mapState({
      isChange: function(state) {
        if (state.screenshots.updateId) {
          let resultData = this.getSingleScreenshotsFun(
            state.screenshots.updateId
          );
          //需将查询出的数据替换到dom
          if ((resultData.status = "200")) {
            //将updateId置空
            let screenshots = this.$store.getters.screenshots;
            screenshots.updateId = "";
          }
        }
      }
    })
  },
  mounted() {}
};
</script>
<style lang="scss">
.screenshots_header {
  position: fixed;
  width: 100%;
  height: 8%;
  background-color: rgba(236, 232, 228, 1);
  top: 0px;
  left: 0px;
}

.screenshots_left {
  position: fixed;
  top: 8%;
  left: 0px;
  width: 3%;
  height: 80%;
  background-color: rgba(236, 232, 228, 1);
}

.screenshots_right {
  position: fixed;
  top: 8%;
  right: 0px;
  width: 3%;
  height: 80%;
  background-color: rgba(236, 232, 228, 1);
}

.screenshots_center_bottom {
  position: fixed;
  top: 88%;
  left: 0px;
  width: 100%;
  height: 7%;
  background-color: rgba(236, 232, 228, 1);
}

.screenshots_bottom {
  position: fixed;
  top: 95%;
  left: 0px;
  width: 100%;
  height: 5%;
  background-color: #000;
}

.screenshots_static_btn {
  position: absolute;
  right: 60px;
  bottom: 10px;
}

.screenshots_static_info {
  color: #000;
  margin-top: 9px;
  margin-left: 58px;
  font-family: none;
  font-size: 16px;
  letter-spacing: 5px;
}

.screenshots_static_info .screenshots_static_input {
  position: absolute;
  top: 4px;
  width: 80%;
}

.screenshots_static_info .screenshots_static_input input {
  border: 0px !important;
  background: #ece8e4;
  padding-left: 5px;
  font-family: none;
  font-size: 16px;
  letter-spacing: 5px;
  color: #000;
}

.screenshots_static_info .dis_text_div {
  display: inline;
  background: #ece8e4;
  padding-left: 5px;
  font-family: none;
  font-size: 16px;
  letter-spacing: 5px;
  color: #000;
}

.screenshots_static_time {
  display: inline-block;
  position: absolute;
  right: -24px;
  font-size: 16px;
  color: #000;
  top: 0px;
  letter-spacing: 5px;
}

.screenshots_static_time .el-input__inner {
  border: 0px !important;
  background: #ece8e4;
  font-size: 16px;
  padding-left: 0px;
  letter-spacing: 2px;
  color: #000;
}

.screenshots_header .el-input {
  width: 100% !important;
}

.screenshots_header .el-input input {
  display: inline-block;
  width: 94%;
  height: 51px;
  background: #ece8e4;
  border-radius: 2px;
  margin-left: 3%;
  margin-top: 14px;
  text-align: center;
  font-size: 28px;
  border: 0px !important;
  letter-spacing: 16px;
  text-indent: 16px;
  font-family: none;
  font-weight: 600;
  color: #000;
}

.screenshots_header .dis_title_div {
  display: inline-block;
  width: 94%;
  height: 51px;
  background: #ece8e4;
  border-radius: 2px;
  margin-left: 3%;
  margin-top: -6px;
  text-align: center;
  font-size: 28px;
  border: 0px !important;
  letter-spacing: 16px;
  text-indent: 16px;
  font-family: none;
  font-weight: 600;
  color: #000;
}

.screenshots_static_time .el-icon-circle-close,
.screenshots_static_time .el-input__icon {
  display: none;
}

.screenshots_list_box {
  z-index: 10;
  position: absolute;
  overflow: hidden;
  height: 870px;
  animation-duration: 0.5s;
  position: absolute;
  right: 89px;
  top: 113px;
}

.screenshots_list_box .screenshots_sit {
  background-image: url("/images/left-bg.png");
  background-size: 100% 100%;
  width: 329px;
  height: 100%;
  box-sizing: border-box;
  margin-right: 20px;
}

.screenshots_list_box .screenshots_sit .line {
  width: 100%;
}

.screenshots_list_box header {
  width: 100%;
  font-size: 0.2rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #2fd5ff;
  text-align: left;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.screenshots_list_box .screenshots {
  overflow: auto;
  height: 95%;
}
.screenshots_list_box .screenshots::-webkit-scrollbar {
  width: 4px;
}
.screenshots_list_box .screenshots::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgb(70, 77, 95);
}
.screenshots_list_box .screenshots::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.add_screenshot_btn {
  margin-right: -134px;
  cursor: pointer;
  width: 22px;
}

.screenshots_update_btn {
  position: relative;
  left: 168px;
}

.screenshots_task_btn {
  font-size: 15px;
  color: #a3a3a3;
  position: relative;
  top: 32px;
  left: -217px;
}

.screenshots_task_btn .el-input__inner {
  height: 30px;
}

.screenshots_task_btn .el-input__suffix {
  height: 121% !important;
}

.screenshots_task_btn .el-select-dropdown {
  background-color: #fff;
}

.hide_box {
  display: none;
}

.screenshot_icon {
  cursor: pointer;
  width: 22px;
  margin-right: 6px;
}

.boder_loading {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.8);
}

.loadding_inf {
  position: relative;
  top: 46%;
  left: 50%;
  color: #3d8ad9;
}

.loadding_inf div {
  position: relative;
  left: -2%;
}

.hide_class {
  display: none !important;
}

.content_length_limit {
  width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.close {
  position: relative;
  right: 11px;
  cursor: pointer;
}
</style>